<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="基本信息" name="first">
      <UserForm
        :id="props.id"
        :fid="props.fid"
        @close-dialog="closeDialog"
      ></UserForm>
    </el-tab-pane>
    <el-tab-pane label="部门列表" name="second" v-if="!props.directory">
      <DeptUserList :fid="props.id"></DeptUserList>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import UserForm from './UserForm.vue'
import DeptUserList from './DeptUserList.vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')
const props = defineProps({ id: String, fid: String, directory: Boolean })
const emit = defineEmits(['close-dialog'])

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const closeDialog = () => {
  emit('close-dialog')
}
</script>
